import React, { Component } from "react";
import { Breadcrumb, PageHeader, Button, Table, Tag, Space, Pagination  } from "antd";

import CheckLogin from "../../../hoc/CheckLogin";
import url from "../../../config/url";
import req from "../../../http/req";

const columns = [
    {
        title: "序号", // 表头的列名称
        dataIndex: "id", // 待显示数据源中对应的字段名称（务必注意大小写）
        key: "id", // 与以前一样，必须要有，唯一
        // render: (text) => <a>{text}</a>,  // render，数据加工处理函数。函数返回需要渲染的内容。形参1：当前字段对应的数据，形参2：当前字段所在行的整条数据
    },
    {
        title: "用户名",
        dataIndex: "username",
        key: "username",
    },
    {
        title: "手机号",
        dataIndex: "mobile",
        key: "mobile",
    },
    {
        title: "邮箱",
        dataIndex: "email",
        key: "email",
        render: (text) => <a href={"mailto:" + text}>{text}</a>,
    },
    {
        title: "性别",
        key: "gender",
        dataIndex: "gender",
        render: (text) => {
            if (text === "1") {
                // 男
                return <Tag color="blue">男</Tag>;
            }
            if (text === "2") {
                // 女
                return <Tag color="red">女</Tag>;
            }
            if (text === "3") {
                // 保密
                return <Tag color="black">保密</Tag>;
            }
        },
    },
    {
        title: "状态",
        key: "status",
        dataIndex: "status",
        render: (text) => {
            if (text === "1") {
                // 正常
                return <Tag color="green">正常</Tag>;
            }
            if (text === "2") {
                // 禁用
                return <Tag color="red">禁用</Tag>;
            }
        },
    },
    {
        title: "操作",
        key: "action",
        render: (text, record) => (
            <Space size="middle">
                <span>编辑</span>
                <span>删除</span>
            </Space>
        ),
    },
];

class Index extends Component {
  state = {
    page: 1,
    total: 0,
    pageSize: 10,
  };
  bread = JSON.parse(sessionStorage.getItem("bread"));
  render() {
    let pathname = this.props.location.pathname;
    let crumb = [];
    this.bread.forEach((el) => {
      if (pathname === el.auth_path) {
        crumb = el.auth_bread.split(",");
      }
    });
    return (
      <>
        <Breadcrumb separator=">">
          {crumb.map((el) => {
            return <Breadcrumb.Item key={el}>{el}</Breadcrumb.Item>;
          })}
        </Breadcrumb>
        <PageHeader
          ghost={false}
          title="用户列表"
          extra={[
            <Button key="btn_add" type="primary">
              用户添加
            </Button>,
          ]}
        />
        <Table 
            columns={columns} 
            rowKey={(record) => record.id} 
            dataSource={this.state.data} 
            pagination={false}
            scroll={
                {
                    scrollToFirstRowOnChange: true,
                    y: 400
                }
            }
        /> 
        <div style={{ textAlign: "center", marginTop: "25px" }}>
            <Pagination defaultCurrent={this.state.page} total={this.state.total} onChange={this.loadData} />
        </div>
      </>
    );
  }
  componentDidMount() {
    this.loadData(this.state.page);
  }
  loadData = (page) => {
    req.get(url.GetUsers, { params: { page } }).then((res) => {
        // console.log(res);
      if(res.data.errNo === 0) {
          this.setState({
              data: res.data.paginate.data,
              total: res.data.paginate.total
          })
      }
    });
  };
}

export default CheckLogin(Index);
